<script setup lang="ts">
import { h, reactive, ref } from 'vue'
import JobLogFormPanel from './JobLogFormPanel.vue'
import { ScheduleJobApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'JobLog' })

const userStore = useUserStore()
const queryForm = reactive<ScheduleJobApi.ScheduleJobLogQuery>({
  jobName: undefined,
  runStatus: undefined,
  sort: ['startTime, desc'],
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => ScheduleJobApi.getLogPage({ ...queryForm, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  // { title: 'id', dataIndex: 'id', slotName: 'id', ellipsis: true, tooltip: true },
  // { title: '任务id', dataIndex: 'jobId', slotName: 'jobId', ellipsis: true, tooltip: true },
  { title: '任务名称', dataIndex: 'jobName', slotName: 'jobName', ellipsis: true, tooltip: true },
  { title: '定时表达式', dataIndex: 'cron', slotName: 'cron', ellipsis: true, tooltip: true },
  // { title: '参数', dataIndex: 'paramJson', slotName: 'paramJson', ellipsis: true, tooltip: true },
  { title: '开始时间', dataIndex: 'startTime', slotName: 'startTime', ellipsis: true, tooltip: true },
  { title: '结束时间', dataIndex: 'endTime', slotName: 'endTime', ellipsis: true, tooltip: true },
  { title: '耗时(s)', dataIndex: 'elapsedSeconds', slotName: 'elapsedSeconds', width: 100 },
  { title: '运行状态', dataIndex: 'runStatus', slotName: 'runStatus', width: 100 },
  // { title: '数据计数', dataIndex: 'dataCount', slotName: 'dataCount', ellipsis: true, tooltip: true },
  // { title: '执行结果信息', dataIndex: 'resultMessage', slotName: 'resultMessage', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:scheduleJobLog:write']),
  },
]

const JobLogFormPanelRef = ref<InstanceType<typeof JobLogFormPanel>>()

// 删除
const onDelete = (item: ScheduleJobApi.ScheduleJobLogResp) => {
  return handleDelete(() => ScheduleJobApi.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

// 详情
const onDetail = (row) => {
  JobLogFormPanelRef.value?.open(row.id)
}
</script>

<template>
  <ProPage title="定时任务日志管理" description="对定时任务日志进行统一管理">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
      @row-click="onDetail"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.jobName" placeholder="请输入任务名称" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-input v-model="queryForm.runStatus" placeholder="请输入运行状态" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #runStatus="{ record }">
        <CellDict :value="record.runStatus" code="RunStatusEnum" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:schedule:manage']" @click="onDetail(record)">
            详情
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <JobLogFormPanel ref="JobLogFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
